<template>
    <view class="swiper-container" :style="{ height: swiperHeight }">
        <swiper :current="currentTabIndex" style="height: 100%;" @change="changeSwiperTab">
            <swiper-item v-for="(tab, index) in tabList" :key="index">
                <scroll-view scroll-y="true" style="height: 100%;">
                    <slot></slot>
                    <!-- <view v-if="index == 2" v-for="i in 10">
                        内容{{ i }}
                    </view>
                    <view v-if="index != 2" v-for="i in 100">
                        内容{{ i }}
                    </view> -->
                </scroll-view>
            </swiper-item>
        </swiper>
    </view>
</template>
<script scoped >
export default {
    name: 'BhTabbarscrollcontent',
    emits: ['changeTab'],
    props: {
        tabList: {
            type: Array,
            default: []
        },
        currentTabIndex: {
            type: Number,
            default: 0
        },
        tabHeight: {
            type: Number,
            default: 50
        }
    },
    data() {
        return {
            swiperHeight: '500px'
        }
    },
    methods: {
        changeTab(tabIndex) {
            this.$emit('changeTab', tabIndex)
        },
        changeSwiperTab(e) {
            console.log('改变swipertab', e)
            this.$emit('changeTab', e.detail.current)
        },
        calSwiperHeight() {
            let that = this
            uni.getSystemInfo({
                success: (res) => {
                    // 将计算得到的剩余高度赋值给 swiper-container
                    this.swiperHeight = (res.windowHeight - that.tabHeight) + 'px'
                }
            });
        }
    },
    // onShow() {
    //     this.calSwiperHeight()
    // },
    computed: {
        currentTabId: function () {
            let newIndex = this.currentTabIndex - 2
            newIndex = newIndex <= 0 ? 0 : newIndex
            console.log('currentTAbId:', newIndex)
            return 't' + newIndex
        },
    },
}
</script>
<style>
.swiper-container {
    /* 假设标题栏高度为50px，计算剩余的高度 */
    overflow: hidden;
    background-color: red;
}

.tab-content {
    width: 100vw;
    /* 设置内容宽度为整个屏幕宽度 */
}
</style>